<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib uri="/WEB-INF/html.tld" prefix="html" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

 <TABLE class='inputTable' style="width:100%"><TR><TD width="50%" valign="top">
 
<html:table attributes="width='100%'">
 			<tr>
				<td colspan="2" class="subSectionBottomBorder">										
					<h4><spring:message text="label.finance.details"/></h4>
				</td>
			</tr>
			<tr>
				<html:td><label class="alpha-numeric required"><spring:message code='label.financial.product'/></label></html:td>
				<html:td>
					<form:select path="finance.financialProduct"  class="alpha-numeric required financeField">
						<c:forEach items="${financeOption}" var="financeOption">
						<option value="${financeOption.financialProductId}">${financeOption.name}</option>
						</c:forEach>
					</form:select>
				</html:td>
				</tr>
			<tr>
				<html:td><label class="alpha-numeric required "><spring:message code='label.total.amount'/></label></html:td>
				<html:td><form:input path="finance.totalAmount" class="amount required financeField"></form:input></html:td>
				</tr>
			<tr>
				<html:td><label class="alpha-numeric required "><spring:message code='label.term'/></label></html:td>
				<html:td>
					<form:select path="finance.term" class="required financeField" items="${lovBean.list('TERM')}" />
				
				</html:td>
				</tr>
			<tr>
				<html:td><label class="alpha-numeric required"><spring:message code='label.amortization'/></label></html:td>
				<html:td>
					<form:select path="finance.amortization" class="financeField" items="${lovBean.list('AMORT')}" />
						
				</html:td>
				

				
			</tr>
		
	</html:table>
</TD>
<TD width="50%"  valign="top">
<div class="subSectionBottomBorder">										
					<h4>Loan Summary</h4>
				</div>
<DIV class="calculation-summary">
<ul>
<li><spring:message code='label.total.amount'/> : </li><li id="totalAmount" class="calc-value"><c:out value="${financeSummary.totalAmount}" default="0.00"/> </li>
</ul>
<ul>
<li><spring:message code='label.term'/> : </li><li id="term" class="calc-value"><c:out value="${financeSummary.term}" default="0"/></li>
</ul>
<ul>
<li><spring:message code='label.amortization'/> : </li><li id="amortization" class="calc-value"><c:out value="${financeSummary.amortization}" default="0" /></li>
</ul>
<ul>
<li><spring:message code='label.total.loan.amount'/> : </li><li class="calc-value">VALUE</li>
</ul>
<ul>
<li><spring:message code='label.total.interest.amount'/> : </li><li class="calc-value">VALUE</li>
</ul>
</DIV>



</TD></TABLE>

<script>



$(function(){
	
	
	$('.financeField').change(function(){
		
		console.log($(this).attr('name'));
		var formData = $("#applicationForm").serializeObject();
		
		<c:url var="calculateAndSave" value="/application/calculateAndSave" />
		var params={url:'${calculateAndSave}',success:updateSummary,data:formData,type:"post",dataType:"json"};
 		doAjax(params);
	});
	
	
	function updateSummary(result)
	{
		console.log(result);
		console.log(result.object);
		
			  $("li.calc-value").each( function() {
				 
					  console.log($(this).attr('id')+'>'+result.object[ $(this).attr('id')]);
				   $(this).text(result.object[ $(this).attr('id')]);
				 
			  });
		
	}
	
	
});
</script>
<style>
<!--

.calculation-summary {
    background: none repeat scroll 0 0 white;
    border-color: #BABABA;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.14);
    margin-top: 10px;
}
.calculation-summary UL {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
.calculation-summary UL LI:first-child {
    text-align: right;
}
.calculation-summary UL LI {
    display: inline-block;
    text-align: left;
    width: 50%;
}

-->
</style>	